Skip to content

Theme: Add Tokens "Introduction" Storybook page#78449

Merged
aduth merged 8 commits into
trunkfrom
add/theme-storybook-tokens
May 20, 2026
Merged

Theme: Add Tokens "Introduction" Storybook page#78449
aduth merged 8 commits into
trunkfrom
add/theme-storybook-tokens

Conversation

@aduth
Copy link
Copy Markdown
Member

@aduth aduth commented May 19, 2026

What?

Updates Storybook to add a "Design System/Tokens/Introduction" page that surfaces content from @wordpress/theme's tokens.md.

Related: #78438

Why?

Paired with #78438, this document is becoming a canonical reference for what tokens exist and how to use them. Currently it lives as a document in the package but isn't surfaced anywhere outside the code or GitHub repository view. Surfacing it in Storybook makes it more accessible for human readers.

How?

Adds a new .mdx Story file that mirrors to the existing file.

Advantage over renaming the file from .md to .mdx:

  • Doesn't expose MDX metadata when viewed through GitHub
  • Maintains support for Design System MCP, which references the tokens.md file directly from its GitHub URL

Testing Instructions

Verify in Storybook:

  1. npm run storybook:dev
  2. Go to http://localhost:50240/?path=/docs/design-system-tokens-introduction--docs
  3. Observe same content as in tokens.md

Screenshots or screencast

image

Use of AI Tools

Claude Code with Opus 4.7. Manual intervention to shift code to packages/theme out of root storybook/ and exempt ESLint rules.

@aduth aduth requested a review from a team as a code owner May 19, 2026 16:00
@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 19, 2026 •
edited
Loading

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: aduth <aduth@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@github-actions github-actions Bot added the [Package] Theme /packages/theme label May 19, 2026
@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 19, 2026 •
edited
Loading

Flaky tests detected in 023fea1.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/26163358045
📝 Reported issues:

@aduth aduth added the [Type] Developer Documentation Documentation for developers label May 19, 2026
ciampo
ciampo approved these changes May 19, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

@ciampo ciampo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice!

@aduth aduth merged commit 0634e16 into trunk May 20, 2026
43 checks passed
@aduth aduth deleted the add/theme-storybook-tokens branch May 20, 2026 18:26
@github-actions github-actions Bot added this to the Gutenberg 23.3 milestone May 20, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@ciampo ciampo ciampo approved these changes

Assignees

No one assigned

Labels

[Package] Theme /packages/theme [Type] Developer Documentation Documentation for developers

Projects

None yet

Milestone

Gutenberg 23.3

Development

Successfully merging this pull request may close these issues.

2 participants

@aduth @ciampo